<template>
  <div class="pay-dialog-page-wrapper">
    <div class="flex-h flex-vc xb_border_bottom ccc pay-dialog-page-title">
      <i
        :class="['iconfont',icon]"
        @click="clickLeft"
      ></i>
      <span class="flex1 fontsize40">{{title}}</span>
      <i class="left-icon"></i>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 点击左边按钮由父元素向其父元素发送事件
    clickLeft() {
      this.$parent.$emit('clickLeft')
    }
  }
}
</script>

<style scoped>
.pay-dialog-page-wrapper {
  background-color: #ffffff;
  width: 750px;
  height: 880px;
  border-radius: 20px 20px 0 0;
}
.pay-dialog-page-title {
  width: 100%;
  height: 100px;
  overflow: visible;
}
.pay-dialog-page-title > i {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0 30px;
  font-size: 40px;
  font-weight: bold;
  color: #ccc;
}
.pay-dialog-page-title > span {
  text-align: center;
  color: #333;
  font-weight: 400;
}
</style>
